<template>
  <el-link :underline="false">
    <el-avatar alt="${username}" :src="avatar" @click="modAvatar"></el-avatar>
    <el-dialog
      v-model="centerDialogVisible"
      title="Notice"
      width="50%"
      destroy-on-close
      center
    >
      <tp-cropper ref="tpCropper" />
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="centerDialogVisible = false">取消</el-button>
          <el-button
            type="primary"
            :disabled="hasCropper"
            @click="uploadImage()"
            >确定</el-button
          >
        </span>
      </template>
    </el-dialog>
  </el-link>
</template>

<script setup lang="ts">
import { ref, reactive, onMounted, watch, nextTick } from "vue";
import TpCropper from "./cropper.vue";
const avatarCropper: any = ref();
const avatar = ref("https://tplentiful.bio/static/avatar/admin/avatar.png");
const centerDialogVisible = ref(false);
const hasCropper = ref(true);
const tpCropper:any = ref(null);
const cropperConfig = reactive({
  viewMode: 1,
});
onMounted(() => {});
function modAvatar() {
  centerDialogVisible.value = !centerDialogVisible.value;
}

watch(
  () => tpCropper.value,
  (oldVal) => {
    hasCropper.value = oldVal == null;
    console.log(hasCropper.value);
  }
);
function uploadImage() {
  nextTick(() => {
    tpCropper.value.uploadImage()
  });
}
</script>

<style lang="scss" scoped>
</style>